<script>
export default {
  data() {
    return {
      city: [{
        cityName:'',
        cityId:''
      }],
      pageable:{
        currentpage:1,
        pagesizes:[20,30,40,50],
        pagesize: 10,
        total:320
      },
      search: ''
    }
  },
  mounted() {
    this.findAllCity()
  },
  methods: {
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageable.pagesize=val;
      this.findAllCity()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageable.currentpage=val;
      this.findAllCity()
    },
    findAllCity() {
      this.$axios.get('AdminCity/findCity',{
        params:{
          page:this.pageable.currentpage,
          limit:this.pageable.pagesize
        }
      }).then(data=>{
        this.city=data.data.data.records
        this.pageable.total=data.data.data.total
      })
    },
    handleEdit(row) {
      console.log(row);
    },

  },

}
</script>

<template>
  <div>
    <template>
      <el-table
        :data="city.filter(data => !search || data.cityName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%">
        <el-table-column
          label="城市Id"
          prop="cityId">
        </el-table-column>
        <el-table-column
          label="城市名称"
          prop="cityName">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=pageable.currentpage
        :page-sizes=pageable.pagesizes
        :page-size=pageable.pagesize
        layout="total, sizes, prev, pager, next, jumper"
        :total=pageable.total
      >
      </el-pagination>
    </template>
  </div>

</template>

<style>

</style>
